<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图数据库标准接口测试</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
        }
        
        #canvas {
            display: block;
            width: 100vw;
            height: 100vh;
        }
        
        #info-panel {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #333;
            max-width: 350px;
            z-index: 1000;
        }
        
        .info-section {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #444;
        }
        
        .info-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        
        .info-title {
            color: #4CAF50;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .info-content {
            font-size: 14px;
            line-height: 1.4;
        }
        
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-success { background-color: #4CAF50; }
        .status-warning { background-color: #FF9800; }
        .status-error { background-color: #F44336; }
        
        .controls {
            margin-top: 15px;
        }
        
        .btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 5px;
            font-size: 12px;
        }
        
        .btn:hover {
            background: #1976D2;
        }
        
        .btn.secondary {
            background: #666;
        }
        
        .btn.secondary:hover {
            background: #555;
        }
        
        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 2000;
        }
        
        .spinner {
            border: 4px solid #333;
            border-top: 4px solid #4CAF50;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    
    <div id="loading">
        <div class="spinner"></div>
        <div>正在加载图数据库标准接口...</div>
    </div>
    
    <div id="info-panel" class="hidden">
        <div class="info-section">
            <div class="info-title">🚀 图数据库标准接口</div>
            <div class="info-content">
                <div id="interface-status">
                    <span class="status-indicator status-success"></span>
                    接口验证成功
                </div>
            </div>
        </div>
        
        <div class="info-section">
            <div class="info-title">📊 数据统计</div>
            <div class="info-content" id="data-stats">
                节点: <span id="node-count">0</span><br>
                边: <span id="edge-count">0</span><br>
                图谱: <span id="graph-name">未知</span>
            </div>
        </div>
        
        <div class="info-section">
            <div class="info-title">✨ 新功能特性</div>
            <div class="info-content">
                ✅ 标准化数据格式<br>
                ✅ 自动数据验证<br>
                ✅ 兼容旧格式<br>
                ✅ 元数据支持<br>
                ✅ 属性扩展
            </div>
        </div>
        
        <div class="controls">
            <button class="btn" onclick="testSampleData()">测试示例数据</button>
            <button class="btn secondary" onclick="testDefaultData()">测试默认数据</button>
        </div>
    </div>

    <script type="module">
        import NetworkRenderer3D from './NetworkRenderer3D.js'
        import { getDefaultGraphData } from './data/dataLoader.js'
        
        let renderer = null
        
        async function init() {
            try {
                const canvas = document.getElementById('canvas')
                renderer = new NetworkRenderer3D(canvas)
                
                // 初始化渲染器
                await renderer.init()
                
                // 加载数据（会自动使用标准接口）
                const success = await renderer.loadData()
                
                if (success) {
                    // 更新UI
                    updateInfoPanel()
                    
                    // 开始渲染
                    renderer.start()
                    
                    console.log('✅ 图数据库标准接口测试成功！')
                } else {
                    console.warn('⚠️ 使用默认数据进行测试')
                    updateInfoPanel()
                    renderer.start()
                }
                
            } catch (error) {
                console.error('❌ 初始化失败:', error)
                document.getElementById('loading').innerHTML = 
                    '<div style="color: #F44336;">❌ 初始化失败: ' + error.message + '</div>'
            } finally {
                // 隐藏加载界面，显示信息面板
                document.getElementById('loading').classList.add('hidden')
                document.getElementById('info-panel').classList.remove('hidden')
            }
        }
        
        function updateInfoPanel() {
            if (!renderer || !renderer.graphData) return
            
            const data = renderer.graphData
            const stats = renderer.graph.getStats()
            
            // 更新统计信息
            document.getElementById('node-count').textContent = stats.nodeCount || 0
            document.getElementById('edge-count').textContent = stats.edgeCount || 0
            document.getElementById('graph-name').textContent = 
                data.metadata?.name || '未命名图谱'
            
            // 更新状态指示器
            const statusEl = document.getElementById('interface-status')
            if (data.metadata && data.nodes && data.edges) {
                statusEl.innerHTML = '<span class="status-indicator status-success"></span>标准接口验证成功'
            } else {
                statusEl.innerHTML = '<span class="status-indicator status-warning"></span>使用兼容模式'
            }
        }
        
        // 全局函数供按钮调用
        window.testSampleData = async function() {
            console.log('🔄 重新加载示例数据...')
            const success = await renderer.loadData('./data/sample_graph_data.json')
            if (success) {
                updateInfoPanel()
                console.log('✅ 示例数据加载成功')
            }
        }
        
        window.testDefaultData = function() {
            console.log('🔄 加载默认数据...')
            const defaultData = getDefaultGraphData()
            renderer.graphData = defaultData
            renderer.graph.setData(defaultData)
            updateInfoPanel()
            console.log('✅ 默认数据加载成功')
        }
        
        // 启动应用
        init()
    </script>
</body>
</html>



